import { BaseRenderer } from "./base_renderer.mjs";
import { createArrayItem, initializeNewItem } from "../array_helpers.mjs";
import { getTargetAndPath } from "../utils.mjs";

/**
 * 数组渲染器
 * 处理数组类型的渲染
 */
export class ArrayRenderer extends BaseRenderer {
  /**
   * 渲染数组
   * @param {Object} params - 渲染参数
   * @param {HTMLElement} params.container - 容器元素
   * @param {Object} params.schema - Schema定义
   * @param {*} params.data - 数组数据
   * @param {string} params.mode - 显示模式
   */
  static render({ container, schema, data, mode }) {
    const arrayContainer = document.createElement("json_array");
    arrayContainer.path = container.path || "";
    this.handleWidthConfig(arrayContainer, schema);
    container.appendChild(arrayContainer);

    this.renderHeader(arrayContainer, schema);
    this.renderBody(arrayContainer, container, schema, data, mode);
  }

  /**
   * 渲染数组头部
   * @param {HTMLElement} container - 容器元素
   * @param {Object} schema - Schema定义
   */
  static renderHeader(container, schema) {
    // 只渲染标题
    if (schema.title) {
      container.innerHTML = `<h2>${schema.title}</h2>`;
    }

    // 创建表头
    const header = document.createElement("json_array_header");

    // 添加数据列的表头
    if (schema.items?.properties) {
      Object.entries(schema.items.properties).forEach(([key, prop]) => {
        const headerLabel = document.createElement("property_label");
        headerLabel.textContent = prop.name || key;
        if (prop.description) {
          headerLabel.title = prop.description;
        }
        header.appendChild(headerLabel);
      });
    }

    container.appendChild(header);
  }

  /**
   * 渲染数组主体
   * @param {HTMLElement} arrayContainer - 数组容器元素
   * @param {HTMLElement} container - 父容器元素
   * @param {Object} schema - Schema定义
   * @param {*} data - 数组数据
   * @param {string} mode - 显示模式
   */
  static renderBody(arrayContainer, container, schema, data, mode) {
    const body = document.createElement("json_array_body");
    arrayContainer.appendChild(body);

    // 渲染现有数据
    if (Array.isArray(data)) {
      data.forEach((item, index) => {
        const itemWrapper = createArrayItem({
          container,
          schema,
          mode,
          body,
          index,
          data: item,
        });
        body.appendChild(itemWrapper);
      });
    }

    // 编辑模式下添加"添加项目"按钮
    if (mode === "edit") {
      this.addAddItemButton(arrayContainer, container, schema, body);
    }
  }

  /**
   * 添加"添加项目"按钮
   * @param {HTMLElement} arrayContainer - 数组容器元素
   * @param {HTMLElement} container - 父容器元素
   * @param {Object} schema - Schema定义
   * @param {HTMLElement} body - 数组主体元素
   */
  static addAddItemButton(arrayContainer, container, schema, body) {
    const addButton = document.createElement("button");
    addButton.textContent = "添加项目";
    addButton.onclick = () => {
      // 创建新行
      const itemWrapper = createArrayItem({
        container,
        schema,
        mode: "edit",
        body,
      });

      // 更新数据结构
      const result = getTargetAndPath(container, schema.path);
      if (result) {
        if (!Array.isArray(result.target[result.finalKey])) {
          result.target[result.finalKey] = [];
        }
        result.target[result.finalKey].push(initializeNewItem(schema));
      }

      body.appendChild(itemWrapper);
    };
    arrayContainer.appendChild(addButton);
  }
}
